import React, {useState, useRef, useEffect} from 'react';

import echarts from 'echarts/lib/echarts';
import 'echarts/map/js/world';
import world from 'echarts/map/json/world.json';

import 'echarts/map/js/china';
import china from 'echarts/map/json/china.json';
import {regions, area} from '../../utils/templDate';


let bottom;
let mapping = false;
const World = () => {
	let myChina

	useEffect(() => {
		myChina= echarts.init(document.getElementById('china'));
		echarts.registerMap('china', china)
		bottom = echarts.init(document.getElementById('zhuangji'))
		createMap();
	}, []);


	function createMap() {
		const option = {
			backgroundColor: 'transparent',
			title: {},
			tooltip: {
				trigger: 'item',
				borderWidth: 0,
				formatter: function (params) {

					if (params.componentSubType === 'scatter') {
						const {data: {name, img, total, sum, day, soon, content}} = params;
						let res = '<section style="width: 442px;background-color: #666;color: #fff;padding: 10px">\n' +
							'    <div style="font-size: 25px">' + name + '</div>\n' +
							'    <div style="display: flex;margin-top: 5px">\n' +
							'        <img src=' + img + ' style="width: 150px;height: 120px;margin: 5px"/>\n' +
							'        <div style="font-size: 14px;margin-left: 20px;">\n' +
							'            <div style="margin-top: 5px">有效/规划容量：</div>\n' +
							'            <div style="margin-top: 5px">' + total + '/' + sum + 'MW</div>\n' +
							'            <div style="margin-top: 5px">当日上网电量：' + day + '万kWh</div>\n' +
							'            <div style="margin-top: 5px">瞬时辐射值：' + soon + 'W/m³</div>\n' +
							'        </div>\n' +
							'    </div>\n' +
							'    <div style="margin-top: 5px;font-size: 16px">电站简介</div>\n' +
							'    <span style="margin-top: 5px;font-size: 14px;width: 300px;">' + content.substring(0, 25) + '<br/>' + content.substring(25) + '</>\n' +
							'</>'
						return res;
					}
					if (params.componentSubType === 'map' && !mapping) {
						mapping = true;
						setTimeout(() => {
							regions.map((item, index) => {
								if (item.name === params.name) {
									bottom.dispatchAction({
										type: "highlight",
										seriesIndex: 0,
										dataIndex: index,
									});
								} else {
									bottom.dispatchAction({
										type: "downplay",
										seriesIndex: 0,
										dataIndex: index,
									});
								}
							})
							mapping = false;
						}, 300);

					}
				},
			},
			geo: {
				map: 'china',
			},
			series: [
				{
					id: 'map',
					type: 'map',
					mapType: 'china',

					label: {
						normal: {
							show: false, //省份名称
							textStyle: {
								color: '#fff',
								fontSize: 8,
							}
						},
						emphasis: {
							show: false,
							textStyle: {
								color: '#fff',
								fontSize: 8,
							}
						}
					},
					itemStyle: {					// 定义样式
						normal: {					// 普通状态下的样式
							areaColor: '#3a7fd5',
							borderColor: '#0a53e9',//线
							shadowColor: '#092f8f',//外发光
							shadowBlur: 20
						},
						emphasis: {					// 高亮状态下的样式
							areaColor: '#0a2dae',//悬浮区背景
						},
					},

				},
				{
					name: '',
					type: 'scatter',
					coordinateSystem: 'geo',
					data: area,
					symbolSize: function (val) {
						return val[2] / 10;
					},
					encode: {
						value: 2
					},
					showEffectOn: 'render',
					rippleEffect: {
						brushType: 'stroke'
					},
					hoverAnimation: true,
					label: {
						formatter: '',
						position: 'right',
						show: true
					},
					itemStyle: {
						color: '#00FA9A',
						shadowBlur: 10,
						shadowColor: '#00FF00'
					},
					zlevel: 1
				},
			]
		};
		myChina.setOption(option, true);


	};


	return (
		<div style={{
			width: '960px',
			height: '880px',
			left: '500px',
			position: 'absolute',
		}} id={"china"}/>
	)


}

export default World;

